<script>
// 账户模态表单页
Vue.component('account-form', {
    template: `
      <el-dialog :visible.sync="dialogShow" width="800px" @close="closeModal">
        <h3 slot="title">
            <span v-if="tallyAccountForm.id">编辑账户</span>
            <span v-else>新增账户</span>
        </h3>
        <el-form ref="form" :rules="tallyAccountRules" :model="tallyAccountForm" label-width="80px">
            <el-form-item v-if="tallyAccountForm.id" class="hidden">
                <el-input v-model="tallyAccountForm.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="账户名称" prop="title" required>
                <el-input autocomplete="off" v-model="tallyAccountForm.title"></el-input>
            </el-form-item>
            <el-form-item label="初始金额" prop="initial_money" required>
                <el-input autocomplete="off" type="number" v-model="tallyAccountForm.initial_money"></el-input>
            </el-form-item>
            <el-form-item label="账户余额" prop="money">
                <el-input autocomplete="off" type="number" disabled v-model="tallyAccountForm.money"></el-input>
            </el-form-item>
            <el-form-item label="标签" prop="tag" required>
                <el-select v-model="tallyAccountForm.tag" :disabled="tallyAccountForm.id?true:false" placeholder="请选择类别">
                    <el-option
                            v-for="(item,index) in accountTags"
                            :key="item.id"
                            :label="item.title"
                            :value="item.title">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="备注" prop="memo">
                <el-input autocomplete="off" type="textarea" v-model="tallyAccountForm.memo"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="closeModal">取 消</el-button>
            <el-button type="primary" @click="handleTallyAccountForm">确 定</el-button>
        </div>
    </el-dialog>
    `,
    props: ['dialog-show','form-row'],
    computed: {
        currentTallyId() {
            return this.$store.state.currentTallyId
        },
        currentTally () {
            return this.$store.state.currentTally
        },
        accountTags() {
            return this.$store.state.accountTags
        }
    },
    watch: {
        dialogShow:{
            handler (newVal) {},
            deep:true,
            immediate: true
        },
        formRow: {
            handler (newVal) {
                this.tallyAccountForm = newVal
            },
            deep:true
        }
    },
    data:function(){
        return {
            tallyAccountForm: {},
            tallyAccountRules: {
                title: [
                    { required: true, message: '请输入账户名称', trigger: 'blur' }
                ],
            },
        }
    },
    methods: {
        closeModal(){
            this.$emit('modalClose')
        },
        handleTallyAccountForm() {
            let that = this
            let postUrl
            if(that.tallyAccountForm.id) {
                postUrl = '/api/account/edit'
            }else{
                postUrl = '/api/account/add'
            }
            that.tallyAccountForm.tally_id = that.currentTallyId
            axios.post(postUrl,that.tallyAccountForm,{
                headers: {'token': loginToken},
            }).then(function(res) {
                if(res.data.status === 'success'){
                    that.$message({
                        type: 'success',
                        message: '解析数操作成功~'
                    });
                    that.$store.dispatch('getAccountList',that.currentTallyId)
                    that.$emit('modalClose')
                }else{
                    that.$message({
                        type: 'error',
                        message: '解析数据失败:'+res.data['error_message']
                    });
                }
            })
        }
    }
})
</script>
<style>

</style>
